<template>
  <div>
    <!--      这段到管理页面添加-->
    <h1>人脸注册</h1>
    用户名
    <el-input v-model="face.username"></el-input>
    <div class="media">
      <video id="video"  width="450" height="300" src="" autoplay></video>
      <canvas id="canvas" width="450" height="300"></canvas>
    </div>
    <button id="register" @click="btn()">确定注册</button>
  </div>
</template>

<script>
import face from "../api/face";

export default {
  name: "faceRegister",
  data() {
    return {
      face: {
        faceBase: '',
        username: ''
      },
    }
  },
  created() {
    this.getVideo()

  },
  methods: {
    //调用摄像头
    getVideo() {
      /**调用摄像头，获取媒体视频流**/
      let video = document.getElementById('video')
      console.log(video)

      let getUserMedia = navigator.getUserMedia
      getUserMedia.call(navigator, {
          video: true,
          audio: false
        },
        // 调用成功
        function (localMediaStream) {
          //获取摄像头捕捉的视频流
          console.log("获得摄像头")
          document.getElementById('video').srcObject = localMediaStream;
        },
        //调用失败
        function () {
          console("请给摄像头权限")
        });
    },
    //点击按钮注册事件
    //点击按钮时拿到登陆者面部信息
    btn() {
      if (this.face.username != null) {
        //返回画布二维画图环境
        let userContext = canvas.getContext("2d");

        userContext.drawImage(document.getElementById('video'), 0, 0, 450, 300);
        let userImgSrc = document.getElementById("canvas").toDataURL("img/png");
        //拿到bash64格式的照片信息
        let faceBase = userImgSrc.split(",")[1];
        this.face.faceBase = faceBase
        face.faceRegister(this.face)
          .then(response => {
            if (response.message == '1') {
              console.log("注册成功")
            } else if (response.message == '2') {
              console.log("已被注册")
            } else {
              alert("发生错误");
            }

          })
      }
    },

  }
}
</script>

<style scoped>

</style>
